<!--
 * @Author: your name
 * @Date: 2021-08-24 13:45:50
 * @LastEditTime: 2021-09-16 14:58:04
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\layouts\footer.vue
-->
<template>
    <div class="perFixContent">
        <!-- 全屏控件 -->
        <div class="perFixContent_full">
            <Tooltip title="全屏">
                <div @click="fullclick">
                    <svg-icon icon-class="fullsreen" v-if="!isFullscreen" size="1.2"></svg-icon>
                    <svg-icon icon-class="fullsreenout" v-if="isFullscreen" size="1.2"></svg-icon>
                </div>
            </Tooltip>
        </div>
        <!-- git -->
        <div class="perFixContent_full">
            <Tooltip title="Gitee">
                <div @click="toGitpage">
                    <svg-icon icon-class="gitee" color="red" size="1.2"></svg-icon>
                </div>
            </Tooltip>
        </div>
        <A-dropdowns :list-datas="listDatas" @click="handleClick">
            <div class="perFixContent_user">
                <div>
                    <Avatar :src="avatarSrc" />
                </div>
                <div class="username">VBeer</div>
            </div>
        </A-dropdowns>
        <!-- 设置图标 -->
        <div class="perFixContent_set" @click="openDrawer">
            <div>
                <svg-icon icon-class="seting" size="1.6"></svg-icon>
            </div>
        </div>
        <!-- 对话框 -->
        <ModalWarps
            :visible="visible"
            icon="loginout"
            :title="keyFun('header.outLogin')"
            icon-color="#666"
            :loading="isload"
            @handleclick="handleOks"
        >
            {{ keyFun("Modal.outlogin") }}
        </ModalWarps>
        <!-- 侧边栏抽屉 -->
        <Setting />
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { Avatar, Tooltip } from 'ant-design-vue'
import ADropdowns from '../../components/dropdown/index.vue'
import ModalWarps from '../../components/Modal/Modalwarp.vue'
import { visibleRef } from '../../setting/menuTrigger'
import Setting from './setting.vue'
import i18n from '../../setting/locales/setlocales'
import { useOutligin } from '../../ntils/outlogin'
import avatars from '../../assets/image/avatar.jpg'
import { useFullscreen } from '@vueuse/core'
const { t } = i18n.global
export default defineComponent({
    name: 'LayoutBreadcrumb',
    components: { ADropdowns, ModalWarps, Setting, Avatar, Tooltip },
    setup() {
        const { toggle } = useFullscreen();
        const isFullscreen = ref<Boolean>(false);
        const fullclick = ()=>{
              toggle();
              isFullscreen.value = !isFullscreen.value;
        }
        // 下拉列表配置
        let listDatas = [
            {
                title: 'header.usercenter',
                icon: 'docs',
            },
            {
                title: 'header.outLogin',
                icon: 'loginout',
            },
        ]
        // 按钮loading
        let isload = ref(false)
        // 显示弹窗
        let visible = ref(false)
        // 点击退出
        const handleClick = (e) => {
            if (e.title == listDatas[listDatas.length - 1].title){
                visible.value = true
            }else if(e.title == listDatas[0].title){
                    window.open('https://static-ff003bee-e9c0-4a83-91b5-f15e4a587481.bspapp.com/Ekl-Doc/index.html#/')
            }
        }
        // 点击ok反馈函数
        const handleOks = (e) => {
            if (e == 'ok') {
                isload.value = true
                // 登出 清除权限token 并清除路由
                useOutligin()
            } else {
                visible.value = false
            }
        }
        // 打开侧边栏抽屉
        const openDrawer = () => {
            visibleRef(true)
        }
        // 国际化
        const keyFun = (key) => t(key)
        let avatarSrc = avatars
        // gitee
        const toGitpage = () => {
            window.open('https://gitee.com/shaohqfspace')
        }
        return {
            listDatas,
            handleClick,
            avatarSrc,
            handleOks,
            openDrawer,
            visible,
            isload, // 按钮load
            keyFun,
            fullclick,
            toGitpage,
            isFullscreen,
        }
    },
})
</script>

<style lang="less" scoped>
.perFixContent {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-right: 20px;
  &_full {
    margin-right: 20px;
    & > div {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      cursor: pointer;
    }
  }
  &_tip {
    display: flex;
    align-items: center;
    height: 50px;
    & > div {
      margin-right: 10px;
    }
  }
  &_user {
    display: flex;
    flex-direction: row;
    align-items: center;

    .username {
      // color: red;
      cursor: pointer;
      &:hover {
        opacity: 0.8;
      }
    }
    & > div:nth-of-type(2) {
      margin: 0 10px;
      font-size: 18px;
    }
  }
  &_set {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    // margin-left: 20px;
    margin-top: 15px;
    padding-left: 5px;
    & > div {
      display: inline-block;
      margin-right: -0.3rem;
    }
  }
}
</style>
